﻿<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="true" CodeBehind="AMD-Podcast-Categories.ascx.cs" Inherits="AMD.Podcast.usercontrols.AMD_Podcast_Categories" %>

   <style>
        #category-lists-container 
        {
            float:left;
            width:475px;
        }
        #category-lists-container .row
        {
            float:left;
            width:100%;
            margin-bottom:10px;
        }
        #category-lists-container .row .row-value
        {
            float:left;
            clear:both;
            display:none;
        }               
        #category-lists-container .row select
        {
            float: left;
            margin-right: 10px;
            width: 125px;
        }   
        #category-lists-container .row .btn
        {
            cursor: pointer;
            float: right;
            text-align: center;
            width: 50px;
        }         
    </style>

    <script type="text/javascript">
        $(function () {
            var _xmlCategories;
            var _container;

            //Load XML containing all category options then setup controls
            $.get('/usercontrols/AMD-Podcast/AMD-Podcast-Categories.xml', function (xml) {
                _xmlCategories = $(xml);
                _container = $("#category-lists-container");

                //setup events for controls generated server side
                $("#category-lists-container select").unbind("change").change(function () {
                    CategoryLists_ListChange($(this))
                });
                $("#category-lists-container .btn").click(CategoryLists_RowButtonClick);


                CategoryLists_Init();
            });

            function CategoryLists_Init() {
                CategoryLists_AddRow();
            }

            function CategoryLists_AddRow() {
                var _row = $("<div class='row' />");
                var _rowValue = $("<input type='text' class='row-value' />");   //Will contain the text value of lowest selected category
                var _rowButton = $("<div class='btn'>add</div>");

                _row.append(_rowValue);
                _row.append(CategoryLists_AddList(0, _xmlCategories.find("categories")));
                _row.append(_rowButton);

                _rowButton.click(CategoryLists_RowButtonClick);

                _container.append(_row);
            }

            function CategoryLists_AddList(_level, _currentNode) {
                var _list = $("<select class='lvl-" + _level + "'></select>");

                CategoryLists_PopulateLists(_list, _currentNode);

                return _list;
            }

            function CategoryLists_PopulateLists(_list, _currentNode) {
                _list.empty()

                _list.append($("<option value=''>Select...</option>"));

                _currentNode.children("category").each(function () {
                    _list.append($("<option value='" + $(this).attr("text") + "'>" + $(this).attr("text") + "</option>"));
                });



                _list.unbind("change").change(function () {
                    CategoryLists_ListChange($(this))
                });

            }

            function CategoryLists_ListChange(_list) {
                var _val = _list.val();
                var _currentLevel = parseInt(_list.attr("class").substring(4, 5)); //Get level from class-name

                //Remove later sibling lists
                _list.parent().find("." + _list.attr("class") + " ~ select").remove();

                //Find selected value/node in the XML doc
                _xmlCategories.find("category[text='" + _val + "']").each(function () {
                    //If selected node has children, add a sub-drop-down list to the row
                    if ($(this).children("category").length > 0) {
                        _list.parent().append(CategoryLists_AddList(_currentLevel + 1, $(this)));
                    }
                });

                //If nothing is selected, get value of previous list
                if (_val.length <= 0) {
                    _val = _list.prevAll("select:first").val();
                }

                _list.parent().find(".row-value").val(_val);
            }


            function CategoryLists_RowButtonClick() {
                if ($(this).html() == "add") {
                    //Only add as a new row if the row has a selected value
                    if ($(this).parent().find(".row-value").val().length > 0) {
                        $(this).html("remove");
                        $(this).prevAll(".row-value").attr("name", "rowvalue"); //ensure rowvalue is included in post 

                        CategoryLists_AddRow();
                    }
                }
                else {
                    $(this).parent().remove();
                }
            }
        });


    </script>

<div class="propertyItem">
    <div id="category-lists-container">
        <%= _output.ToString() %>
    </div>   

</div>